<template>
    <div class="keyIndicators-alert-box">
        <div class="keyIndicators-alert-content">
            <div style="height: calc(100vh - 200px);width: 40%;">
                <div class="ringDiagram-comp" :id="containerId"></div>
            </div>
            <div style="width: 60%;">
                <div class="keyIndicators-alert-tabs">
                    <a-tabs v-model:activeKey="activeKey" type="card" @change="callback">
                        <a-tab-pane key="0" tab="超标项目"></a-tab-pane>
                        <a-tab-pane key="1" tab="预警项目"></a-tab-pane>
                        <!-- <a-tab-pane key="2" tab="三个月以上有效"></a-tab-pane>
                        <a-tab-pane key="3" tab="长期有效"></a-tab-pane> -->
                    </a-tabs>
                </div>
                <div style="position: fixed;">
                    <span class="keyIndicators-alert-num alert-num0">{{ licenseWarningList[0].num }}</span>
                    <span class="keyIndicators-alert-num alert-num1">{{ licenseWarningList[1].num }}</span>
                </div>
                <div>
                    <commpVxeTable
                        :key="certificateAlertKey"
                        :config="certificateAlertConfig" 
                        :columns="certificateAlertColumns"
                        :formItem="[]" 
                        :occupancyHeight="100"
                        :isCanWrap="true"
                    >
                        <template v-slot:yjdj_name="{row}">
                            <span v-if="row.yjdj == '预警'" style="color: #fac858;">预警</span>
                            <span v-if="row.yjdj == '超标'" style="color: #ee6666;">超标</span>
                        </template>
                        <template v-slot:operation_btn="{row}">
                            <a-form layout="inline" class="search-form">
                                <a-form-item>
                                    <a-button class="blue-btn" type="primary" @click="trendAnalysisClick(row)" >趋势分析</a-button>
                                </a-form-item>
                            </a-form>
                        </template>
                    </commpVxeTable>
                </div>
            </div>
        </div>
        <trendAnalysis ref="trendAnalysisRef" />
    </div>
</template>
<script>
import {
    spcyQyInfoqueryGjzbYjPageList,
} from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import trendAnalysis from './trendAnalysis.vue'
export default {
    components:{
        commpVxeTable,
        trendAnalysis,
    },
    props:{
        onlyCurrentUser:{
            type:Boolean,
            default: () => {
                return false
            },
            required:false
        },
        fqyid:{
            type:String,
            default: () => {
                return ''
            },
            required:false
        },
    },
    data(){
        return{
            activeKey:'0',
            containerId:'keyIndicators'+ new Date().getTime(),
            licenseWarningList:[{
                typeNum:'cbSize',
                typeList:'cbList',
                num:0,
                list:[],
                title:'超标项目',
            },{
                typeNum:'yjSize',
                typeList:'yjList',
                num:0,
                list:[],
                title:'预警项目',
            }],
            certificateAlertKey:null,
            certificateAlertConfig:{
                api:assessCheckApi.spcyQyInfoqueryGjzbYjPageList,
                rowId: 'id',
                height:400,
                autoHidden:true,
                pageSize:10000,
                listData:'cbList',
                paramet:{
                    onlyCurrentUser:this.onlyCurrentUser,
                    fqyid:this.fqyid,
                }
            },
            certificateAlertColumns:[{
                title: '企业名称',
                field: 'fqymc',
            }
            // ,{
            //     title: '统一社会信用代码',
            //     field: 'ftyshxydm',
            // }
            ,{
                title: '产品批号',
                field: 'fcpph',
            },{
                title: '报告编号',
                field: 'fbgbh',
            },{
                title: '生产日期',
                field: 'fscrq',
                width:88,
            },{
                title: '报告日期',
                field: 'fbgrq',
                width:88,
            },{
                title: '项目名称',
                field: 'fxmmc',
            },{
                title: '标准规定',
                field: 'fbzgd',
            },{
                title: '检验数据',
                field: 'fjysj',
            },{
                title: '项目检验结论',
                field: 'fxmjyjl',
            },{
                title: '预警等级',
                field: 'yjdj',
                slots: {
                    default: 'yjdj_name',
                },
                width:50
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:100,
            }],
        }
    },
    watch:{

    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
            spcyQyInfoqueryGjzbYjPageList({onlyCurrentUser:this.onlyCurrentUser,fqyid:this.fqyid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result)
                    let data = JSON.parse(JSON.stringify(this.licenseWarningList))
                    for(let key  in res.result){
                        this.licenseWarningList.forEach((item,index)=>{
                            if(item.typeNum == key){
                                data[index].num = res.result[item.typeNum]
                            }
                            if(item.typeList == key){
                                data[index].list = res.result[item.typeList]
                            }
                        })
                    }
                    this.licenseWarningList = data
                    // //console.log(this.licenseWarningList)
                    this.getPieChart(this.licenseWarningList)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        
        getPieChart(list){
            let dataList = list.map(item=>{return {name:item.title,value:item.num}})
            var chartDom = document.getElementById(this.containerId);
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // orient: 'vertical',
                    left: 'center',
                    padding:[30,0,0,0],
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 16
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '40%',
                        startAngle: 180,
                        center: ['45%', '50%'],
                        data: dataList,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                            color: function (colors) {
                                var colorList = ['#ee6666','#fac858','#5470c6','#91cc75'];
                                return colorList[colors.dataIndex];
                            }
                            },
                        },
                        label: {
                            formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#F6F8FC',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        callback(){
            //console.log(this.licenseWarningList)
            let index = Number(this.activeKey)
            //console.log(index)
            this.certificateAlertConfig.listData = this.licenseWarningList[index].typeList
            this.certificateAlertConfig.paramet = { onlyCurrentUser:this.onlyCurrentUser,fqyid:this.fqyid }
            //console.log(this.licenseWarningList[index].typeList)
            this.certificateAlertKey = Date.now()
        },
        trendAnalysisClick(row){
            this.$refs.trendAnalysisRef.getData(row)
            this.$refs.trendAnalysisRef.visible = true
        },
    }
}
</script>
<style lang="less">
.keyIndicators-alert-box{
    background-color: #fff;
    .keyIndicators-alert-content{
        display: flex;
        flex-direction: row;
        height: calc(100vh - 200px);
        overflow-y: auto;
    }
    .keyIndicators-alert-tabs{
        .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
            padding-right: 30px;
            margin-right: 10px !important;
        }
        .ant-tabs-tab{
            border-radius: 10px 10px 0 0 !important;
        }
        .ant-tabs-nav-container{
            padding-left: 10px;
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
        }
        .ant-tabs-tab-active{
            background-color: #5ca3e5 !important;
            color: #fff !important;
            border-color: #5ca3e5 !important;
            box-shadow: 0px 0px 12px 0px #5ca3e5;
        }
    }
    .keyIndicators-alert-num{
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #ed5565;
        color: #fff;
        text-align: center;
        line-height: 25px;
        position: relative;
        top: -50px;
        overflow: hidden;
        border: 1px solid #fff;
    }
    .alert-num0{
        left: 91px;
        background-color: #ee6666;
    }
    .alert-num1{
        left: 185px;
        background-color: #fac858;
    }
    .alert-num2{
        left: 332px;
        background-color: #5470c6;
    }
    .alert-num3{
        left: 420px;
        background-color: #91cc75;
    }
    .ringDiagram-comp{
        width: 100%;
        height: calc(100vh - 200px);
    }

}
</style>